<template>
    <div class="chart">
        <div class="wrap" :id="'customerChart' + index"></div>
    </div>
</template>
<script>
import { reactive, toRefs, onMounted, watch } from "vue"
import * as echarts from "echarts"
export default {
    props: ["chartObj", "cindex"],
    setup(props) {
        watch(
            () => props.chartObj,
            (newVal, oldVal) => {
                if (props.chartObj.iscity) {
                    initCityEchart()
                } else {
                    initEchart()
                }
            }
        )
        const state = reactive({
            dateArr: props.chartObj,
            index: props.cindex
        })
        function initCityEchart() {
            let days = []
            let item = props.chartObj
            days = item.xAxisData
            let start = 0
            if (days.length > 7) {
                start = ((days.length - 7) / days.length) * 100
            }
            const option = {
                grid: {
                    top: "12%",
                    left: "12%",
                    right: "12%",
                    bottom: 50
                },
                legend: {
                    orient: "horizontal", //布局方式：  horizontal/vertical
                    x: "center", // 水平安放位置，默认为全图居中，可选： 'center' ¦ 'left' ¦ 'right'  或 {number}（x坐标，单位px）
                    y: "bottom", //垂直安放位置，默认为全图顶端，可选： 'top' ¦ 'bottom' ¦ 'center' 或 {number}（y坐标，单位px）
                    itemGap: 5,
                    textStyle: {
                        // 图例文字大小颜色
                        fontSize: 12,
                        color: "#333333"
                    },
                    data: [item.title],
                    itemGap: 5 // 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
                },
                tooltip: {
                    trigger: "axis"
                },
                dataZoom: [
                    {
                        id: "dataZoom",
                        type: "inside",
                        xAxisIndex: [0],
                        filterMode: "none",
                        start: 0, //从哪个位置开始，自适应位置变化
                        end: 100 //百分比，100的意思是100%
                    }
                ],
                xAxis: {
                    type: "category",
                    boundaryGap: false, // 坐标轴两边是不是留白
                    data: item.xAxisData,
                    axisLine: {
                        //坐标系
                        show: true,
                        lineStyle: {
                            //x坐标系字体样式
                            color: "#E8E8E8",
                            width: 0.5
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        formatter: function (value) {
                            return value.split("").join("\n")
                        },
                        color: "grey" //x轴字体颜色
                    },
                    axisTick: {
                        // 刻度线
                        show: false
                    }
                },
                yAxis: {
                    show: false,
                    type: "value",
                    axisLabel: {
                        //字体
                        color: "grey"
                    },
                    axisLine: {
                        //y轴线
                        show: true,
                        lineStyle: {
                            color: "#BEBEBE"
                        }
                    },
                    axisTick: {
                        //y刻度线
                        show: false
                    },
                    splitLine: {
                        // 背景线 分割线
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#F5F5F5"
                        }
                    }
                },
                series: [
                    {
                        name: item.title,
                        data: item.yAxisData,
                        type: "line",
                        smooth: true, //显示平滑曲线
                        label: {
                            show: true,
                            position: "top",
                            textStyle: {
                                //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                                fontSize: 14,
                                color: "#000",
                                fontWeight: "bloder"
                            }
                        },
                        lineStyle: {
                            color: item.lineColor //折线颜色
                        },
                        itemStyle: {
                            //折线点颜色
                            normal: {
                                color: item.areaClolor
                            }
                        },
                        areaStyle: {
                            //区域渐变色
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: item.areaClolor
                                        },
                                        {
                                            offset: 1,
                                            color: "#ffffff"
                                        }
                                    ]
                                )
                            }
                        }
                    }
                ]
            }
            let myChart = echarts.init(
                document.getElementById("customerChart" + state.index)
            )
            myChart.setOption(option)
            //监听窗口的变化，不想屏幕自适应可以不写
            window.addEventListener("resize", function () {
                myChart.resize()
            })
        }
        function initEchart() {
            let days = []
            let item = props.chartObj
            days = item.xAxisData
            let start = 0
            if (days.length > 7) {
                start = ((days.length - 7) / days.length) * 100
            }
            const option = {
                grid: {
                    top: "12%",
                    left: "12%",
                    right: "12%",
                    bottom: 50
                },
                legend: {
                    orient: "horizontal", //布局方式：  horizontal/vertical
                    x: "center", // 水平安放位置，默认为全图居中，可选： 'center' ¦ 'left' ¦ 'right'  或 {number}（x坐标，单位px）
                    y: "bottom", //垂直安放位置，默认为全图顶端，可选： 'top' ¦ 'bottom' ¦ 'center' 或 {number}（y坐标，单位px）
                    itemGap: 5,
                    textStyle: {
                        // 图例文字大小颜色
                        fontSize: 12,
                        color: "#333333"
                    },
                    data: [item.title],
                    itemGap: 5 // 各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
                },
                tooltip: {
                    trigger: "axis"
                },
                dataZoom: [
                    {
                        id: "dataZoom",
                        type: "inside",
                        xAxisIndex: [0],
                        filterMode: "none",
                        start: start, //从哪个位置开始，自适应位置变化
                        end: 100 //百分比，100的意思是100%
                    }
                ],
                xAxis: {
                    type: "category",
                    boundaryGap: false, // 坐标轴两边是不是留白
                    data: item.xAxisData,
                    axisLine: {
                        //坐标系
                        show: true,
                        lineStyle: {
                            //x坐标系字体样式
                            color: "#E8E8E8",
                            width: 0.5
                        }
                    },
                    axisLabel: {
                        interval: 0, //0代表显示所有x轴标签显示,1不显示全
                        // 垂直显示
                        formatter: function (value) {
                            return value
                        },
                        color: "grey" //x轴字体颜色
                    },
                    axisTick: {
                        // 刻度线
                        show: false
                    }
                },
                yAxis: {
                    show: false,
                    type: "value",
                    axisLabel: {
                        //字体
                        color: "grey"
                    },
                    axisLine: {
                        //y轴线
                        show: true,
                        lineStyle: {
                            color: "#BEBEBE"
                        }
                    },
                    axisTick: {
                        //y刻度线
                        show: false
                    },
                    splitLine: {
                        // 背景线 分割线
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#F5F5F5"
                        }
                    }
                },
                series: [
                    {
                        name: item.title,
                        data: item.yAxisData,
                        type: "line",
                        smooth: true, //显示平滑曲线
                        label: {
                            show: true,
                            position: "top",
                            textStyle: {
                                //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                                fontSize: 14,
                                color: "#000",
                                fontWeight: "bloder"
                            }
                        },
                        lineStyle: {
                            color: item.lineColor //折线颜色
                        },
                        itemStyle: {
                            //折线点颜色
                            normal: {
                                color: item.areaClolor
                            }
                        },
                        areaStyle: {
                            //区域渐变色
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: item.areaClolor
                                        },
                                        {
                                            offset: 1,
                                            color: "#ffffff"
                                        }
                                    ]
                                )
                            }
                        }
                    }
                ]
            }
            let myChart = echarts.init(
                document.getElementById("customerChart" + state.index)
            )
            myChart.setOption(option)
            //监听窗口的变化，不想屏幕自适应可以不写
            window.addEventListener("resize", function () {
                myChart.resize()
            })
        }
        onMounted(() => {
            if (Object.keys(state.dateArr).length != 0) {
                if (state.dateArr.iscity) {
                    initCityEchart()
                } else {
                    initEchart()
                }
            }
        })
        return {
            ...toRefs(state)
        }
    }
}
</script>
<style lang="scss" scoped>
.chart {
    width: 100%;
    padding: 10px 0 2px;

    .title {
        color: #666;
        padding-left: 10px;
        display: flex;
        align-items: center;
        &::before {
            content: "";
            display: block;
            width: 15px;
            height: 30px;
            background: #3eb3f8;
            margin-right: 6px;
        }
    }
    div {
        text-align: center;
        color: #666;
        font-size: 14px;
    }
    .wrap {
        width: 100%;
        height: 180px;
    }
}
</style>
